<template>
	<view class="content">

		<view class="center_view">
			<view :style="'background-color:'+checkItem.background" class="u-grid-item-cls">
				<image class="iconClass" :src="globalUrl+getIcon(checkItem.checkedIcon)"></image>
			</view>
		</view>
		<view style="text-align: center;margin-bottom: 15px;">
			<view class="grid-text-bottom">{{checkItem.name}}</view>
		</view>
		
		<view style="text-align: center;margin-bottom: 15px;">
			<view class="grid-text-bottom">{{gettime()}}完成</view>
		</view>
		<view style="text-align: center;margin-bottom: 15px;">
			<view class="grid-text-bottom">{{checkItem.remark}}</view>
		</view>
		<view class="textarea-container">
			<textarea class="textarea" v-model="remark" maxlength="100" placeholder="打卡心得"
				placeholder-class="placeholder_style"></textarea>
		</view>
		<view @click="updateData()" style="position: absolute;top:10px;right:10px;color: #18B998;">确定</view>
		<view @click="cancelBottom()" style="position: absolute;top:10px;left:10px;color: #18B998;">取消</view>
	</view>
</template>

<script>
	
	var _self;
	export default {
		name: 'myHabitPopupContent',
		props: {
			checkItem: {
				type: Object,
				default:{}
			},
			year:{
				type:Number,
				default:0
			},
			month:{
				type:Number,
				default:0
			},
			day:{
				type:Number,
				default:0
			},
			
		},
		watch:{
			
		},
		data() {
			return {
				globalUrl: getApp().globalData.url,
				remark: '',
				user:[],
				iconList:[],
				
			};
		},
		
		methods: {
			//新增打卡
			updateData() {
				
				var nowTime = this.year + "-" + (this.month >= 10 ? this.month : "0" + this.month) + "-" + (this.day >=
					10 ? this.day : "0" + this.day)
			
				// var uri = getApp().globalData.url + 'modules/habitLog/appUpdate';
				var data = {}
			
				data = {
					habitId: this.checkItem.id,
					userId: this.user.id,
					remark: this.remark,
					time: nowTime,
				}
			
				this.$api.updateHabitLog(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						this.$emit('closePopupBottom', 1)
					} else {
						this.$emit('closePopupBottom', 0)
					}
				})
				
				
				
			},
			
			
			//删除打卡
			goDel() {
				var _self = this
				_self.$api.deleteHabitLog({}, _self.checkItem.habitLog.id).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						this.$emit('closePopupBottom', 1)
					}
				})
				
			},
			getIcon(checkedIconIndex) {
				var checkedIcon = ""
			
				for (var i = 0; i < this.iconList.length; i++) {
					if (checkedIconIndex == this.iconList[i].id) {
						checkedIcon = this.iconList[i].url
						break;
					}
			
				}
				return checkedIcon;
			},
			cancelBottom() {
				this.$emit('closePopupBottom', 0)
			},
			
			gettime() {
				//当前天10/08 21:46
				var currentDate = new Date();
				var year = currentDate.getFullYear(); // 获取年份，例如 2023
				var month = currentDate.getMonth() + 1; // 获取月份，注意要加 1，因为月份从 0 开始计数
				var day = currentDate.getDate(); // 获取日期
				var h = currentDate.getHours();
				var m = currentDate.getMinutes();
			
				var time = month + "/" + day + " " + h + ":" + m;
				return time;
			},
			
			getIconList() {
				// var uri = getApp().globalData.url + 'modules/icon/appList?type=1'
				var _self = this
				
				var data = {
					type: 1
				}
				this.$api.listHabitIcon(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						_self.iconList = resData.data;
					}
				})
				
			},
		},
		mounted() {
			_self = this;
			_self.remark = ''
			uni.getStorage({
				key: 'user',
				success: function(res) {
					if (res.data) {
						_self.user = res.data
						_self.getIconList()
					}
				},
				fail: function(e) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			})
			
		}
	};
</script>

<style>
	.content{
		float: left;
		width: 100%;
	}
	.center_view {
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 15px;
		margin-bottom: 4px;
	
	}
	.textarea-container {
		display: flex;
		flex-direction: column;
		padding: 10px 20px;
		width: 100%;
	
	}
	.u-grid-item-cls {
	
		width: 60px;
		height: 60px;
		border-radius: 50%;
		line-height: 60px;
		text-align: center;
		font-size: 24px;
	
	}
	.textarea {
		width: 100%;
		float: left;
	}
	
	.grid-text-bottom {
		padding-top: 10px;
	}
	
	
	.placeholder_style {
		font-size: 14px;
	}
</style>